<template>
	<div>
		<view class="status_bar">
			<view class="top_view"></view>
		</view>
		<view class="searchbox">
			<!-- <input type="text" class="s_input" placeholder="搜索" v-model="searchtxt" return-key-type="search" @blur="search" /> -->
			<text class="searchname"> 绑定手机号</text>
		</view>	
		<div class="user_ user_phone">
			<image class="user_phone_icon" src="/static/imgs/phone.png" resize="stretch"></image>
			<input class="user_phone_input"  type="number" v-model="user.phone" placeholder="请输入手机号" />
		</div>
		<div class="user_">
			<image class="user_code_icon" src="/static/imgs/key.png" resize="stretch"></image>
			<input class="user_code_input"  type="number" v-model="user.code" placeholder="请输入验证码" />
			<text class="user_send_btn" :class="[user.isSend?'gray':'']" @click="sendCode">{{user.isSend?user.time+'S':'发送验证码'}}</text>
		</div>
		<!-- <div class="user_ ">
			<image class="user_phone_icon" src="/static/imgs/suo.png" resize="stretch"></image>
			<input class="user_phone_input"  type="password" v-model="user.pwd" placeholder="请输入密码" />
		</div>
		<div class="user_ ">
			<image class="user_phone_icon" src="/static/imgs/suo.png" resize="stretch"></image>
			<input class="user_phone_input"  type="password" v-model="user.pwd2" placeholder="请再次输入密码" />
		</div> -->
		<div class="login_d">
			<text class="login_t" @click="cofrim">绑定</text> 
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				user:{
					phone:"",
					code:"",
					pwd:"",
					pwd2:"",
					isSend:false,
					userInfo:{},
					time:60,
				}
			}
		},
		created() {
			let _this = this;
			uni.getStorage({
				"key":"storage_key",
				success(e){
					
					_this.userInfo = e.data;
					if(!_this.userInfo.uid){
						
					}
					if(_this.userInfo.ispass){
						uni.showToast({
							title: '账号已被查封，请与管理员联系',
							icon:"none" 
						});
						setTimeout(()=>{
							uni.redirectTo({
								url: '/pages/public/login/login'
							})
						},1500)
					}
				},
				fail: (error) => {
					console.log("e is :",error); 
				}
			})
		},

		methods: {
			sendCode(){
				let _this = this;
// 				console.log("isedn:",_this.isSend);
				if(/^[1][3,4,5,7,8][0-9]{9}$/.test(this.user.phone)){
					console.log(_this.user.isSend);
				if(_this.user.isSend){
					return ;
				}
				_this.user.isSend = true;
				var timer = setInterval(function(){
					_this.user.time--;
					if(_this.user.time<=0){
						clearInterval(timer);
						_this.user.isSend = false;
						_this.user.time =60;
					}
				},1000)
// 				
				console.log("_this.userInfo: " + _this.userInfo.access_token);
					uni.request({
						url:'http://apptest.pinchao.cc/api.php/User/sendLoginMsgcode',
						method:"post",
						header:{
							app_version:'1.0.0',
							system_version:_this.system,
							"Content-Type":"application/x-www-form-urlencoded"
						},
						data:{
							"mobile":_this.user.phone,
							"access_token":_this.userInfo.access_token,
							"uid":_this.userInfo.uid
						},
						success(res) {
							uni.switchTab({
								url:"/pages/home/home"
							})
							uni.showToast({
								icon:"none",
								title:res.data.msg
							})
						},
						error(err){
							console.log("err:",err)
						}
					})
				}else{
					uni.showToast({
						icon:"none",
						title:"请输入正确的手机号"
					})
				}
			},
			cofrim(){
				let _this = this;
				if(!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.user.phone)){
					uni.showToast({
						icon:"none",
						title:"请输入正确的手机号"
					})
				}else if(!this.user.code ||this.user.code.length<4){
					uni.showToast({
						icon:"none",
						title:"请输入验证码，验证码必须是4位"
					})
				}/* else if(!this.user.pwd ||!this.user.pwd2){
					uni.showToast({
						icon:"none",
						title:"请输入密码"
					})
				}else if(this.user.pwd != this.user.pwd2){
					uni.showToast({
						icon:"none",
						title:"两次密码不相等"
					})
				} */else{
					console.log("sdasdqwe",_this.userInfo);
					uni.request({
							url:'http://apptest.pinchao.cc/api.php/User/checkLoginMsgcode',
							method:"post",
							header:{
								app_version:'1.0.0',
								system_version:_this.$system,
								"Content-Type":"application/x-www-form-urlencoded"
							},
							data:{
								"mobile":_this.user.phone,
								"msgcode":_this.user.code,
								"access_token":_this.userInfo.access_token,
								"uid":_this.userInfo.uid
							},
							success(res) {
								console.log(res)
								if(res.data.ret==200){
									uni.showToast({
										icon:"none",
										title:"绑定成功",
									})
										uni.navigateTo({url:"/pages/home/home"})
								}else{
									uni.showToast({
										icon:"none",
										title:res.data.msg,
										
									})
								}
								
							},
							error(err){
								console.log("err:",err)
							}
						})
					}
				}
			}
		}
	
</script>

<style>
	.content{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
		.status_bar {
		width: 750upx;
		height: 44upx;
		background-color: #000;
	}
	.user_phone{
		
	}
	.searchbox{
		width: 750upx;
		height: 84upx;
		background-color: #000;
		margin-bottom: 180upx;
		text-align: center;
	}
	.searchname{
		color: #fff;
		text-align: center;
		font-size: 36upx;
	}
	.gray{
		background-color: gray;
	}
.user_{
	width: 670upx;
	height: 76upx ;
	margin-top: 60upx;
	margin-left: 40upx;
	border-bottom-style :solid;
	border-bottom-width:2upx;
	border-bottom-color: #CECECE;
	display: flex;
	flex-direction: row;
}
.user_phone_icon{
	margin-top: 10upx;
	width: 40upx;
	height: 40upx;
}
.user_code_icon{
	margin-top: 10upx;
	width: 40upx;
	height: 40upx;
}
.user_phone{
	margin-top: 120upx;
}
.user_phone_input{
	width: 400upx;
	height: 50upx;
	margin-left: 20upx;
	vertical-align: top;
}
.user_code_input{
	width: 400upx;
	height: 50upx;
	margin-left: 20upx;
	vertical-align: top;
}

.user_send_btn{
	width: 200upx;
	height: 50upx;
	border-radius: 10upx;
	background-color: #DCC500;
	text-align: center;
	line-height: 50upx;
	color: #fff;
	font-size: 28upx;
}
.login_d{
	width: 670upx;
	margin-left: 40upx;
	height: 80upx;
	border-radius: 10upx;
	background-color: #DCC500;
	margin-top: 80upx;
	text-align: center;
}
.login_t{
	color: #FFFFFF;
	font-size: 34upx;
	text-align: center;
	line-height: 80upx;
}
</style>
